<template>
  <div v-if="article" class="article-container">
    <header class="article-header">
      <h1 class="article-title">{{ article.title }}</h1>
      <div class="article-meta">
        <router-link 
          :to="{ name: 'userProfile', params: { id: article.user_id }}" 
          class="author-info"
        >
          <img :src="article.author_avatar" :alt="article.author_name" class="author-avatar">
          <span class="author-name">{{ article.author_name }}</span>
        </router-link>
        <div class="article-stats">
          <span class="stat-item">
            <i class="fas fa-calendar"></i>
            {{ formatDate(article.create_time) }}
          </span>
          <span class="stat-item">
            <i class="fas fa-comment"></i>
            {{ article.comment_count }} 评论
          </span>
          <span class="stat-item">
            <i class="fas fa-heart"></i>
            {{ article.like_count }} 点赞
          </span>
          <span class="stat-item">
            <i class="fas fa-eye"></i>
            {{ article.view_count }} 阅读
          </span>
        </div>
      </div>
    </header>

    <div class="article-content markdown-body" v-html="renderedContent"></div>

    <div class="article-actions">
      <button 
        class="action-btn like-btn"
        :class="{ active: isLiked }"
        @click="toggleLike"
      >
        <i class="fas fa-heart"></i>
        {{ isLiked ? '已点赞' : '点赞' }} {{ article.like_count || 0 }}
      </button>
      <button 
        class="action-btn share-btn"
        @click="toggleShare"
      >
        <i class="fas fa-share"></i>
        转发 {{ article.share_count || 0 }}
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useArticleStore } from '../stores/articleStore'
import { marked } from 'marked'
import 'github-markdown-css'

const route = useRoute()
const articleStore = useArticleStore()
const isLiked = ref(false)

// 获取文章数据
const article = computed(() => {
  return articleStore.getArticleById(Number(route.params.id))
})

// 渲染 Markdown 内容
const renderedContent = computed(() => {
  if (!article.value?.content) return ''
  return marked(article.value.content)
})

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}

// 点赞功能
const toggleLike = async () => {
  try {
    if (isLiked.value) {
      await articleStore.unlikeArticle(article.value.id)
      isLiked.value = false
    } else {
      await articleStore.likeArticle(article.value.id)
      isLiked.value = true
    }
    // 重新获取文章数据以更新点赞数
    await articleStore.fetchArticles()
  } catch (error) {
    console.error('点赞失败:', error)
  }
}

// 转发功能
const toggleShare = async () => {
  try {
    await articleStore.shareArticle(article.value.id)
    // 重新获取文章数据以更新状态
    await articleStore.fetchArticles()
  } catch (error) {
    console.error('转发失败:', error)
  }
}

// 加载文章数据并检查点赞状态
onMounted(async () => {
  try {
    await articleStore.fetchArticles()
    
    // 假设当前用户ID为1
    const userId = 1
    const liked = await articleStore.checkLikeStatus(article.value.id, userId)
    isLiked.value = liked
  } catch (error) {
    console.error('加载文章失败:', error)
  }
})
</script>

<style scoped>
.article-container {
  padding: 32px;
}

.article-header {
  margin-bottom: 32px;
}

.article-title {
  font-size: 32px;
  color: var(--text-color);
  margin-bottom: 16px;
  line-height: 1.4;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.author-info {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.author-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--primary-color);
}

.article-stats {
  display: flex;
  gap: 16px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-light);
  font-size: 14px;
}

.stat-item i {
  font-size: 14px;
}

.article-content {
  margin: 32px 0;
  line-height: 1.8;
  color: var(--text-color);
}

.article-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border-color);
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.like-btn {
  background: var(--primary-color);
  color: white;
}

.like-btn:hover {
  background: #0052a3;
}

.like-btn.active {
  background: #e74c3c;
}

.share-btn {
  background: #f8f9fa;
  color: var(--text-color);
}

.share-btn:hover {
  background: #e9ecef;
}

/* Markdown 样式覆盖 */
:deep(.markdown-body) {
  background: none;
  font-family: inherit;
}

:deep(.markdown-body pre) {
  background: #f8f9fa;
  border-radius: 4px;
}
</style> 